<template>
  <div>
    <div class="m-shop" v-if="shopDetailData || foodListData.length">
      <van-overlay :show="mutIsShow" :z-index="100">
        <div class="wrapper">
          <div class="block pt-2">
            <van-icon name="cross" size="20" color="#606266" @click="turnBack" class="x-icon" />
            <header class="text-center mt-2 mb-5 fs-4 text-1">{{ showData.name }}</header>
            <p class="ml-2 mb-3 text-2 fs-5">规格</p>
            <section>
              <van-tag
                v-for="item in showData.specfoods"
                :key="item._id"
                :color="selectedCart.specs_name == item.specs_name ? '#3190e8' : '#606266'"
                class="mx-2"
                size="large"
                plain
                @click="addMutCart(item)"
                >{{ item.specs_name }}</van-tag
              >
            </section>
            <footer class="mt-6 back-gray dialog-footer">
              <div class="f-price ml-2">
                <span class="fs-9">￥</span>
                <span class="fs-2 strong">{{ selectedCart.price }}</span>
              </div>
              <div class="add-btn">
                <van-button type="primary" size="mini" @click="addFood">加入购物车</van-button>
              </div>
            </footer>
          </div>
        </div>
      </van-overlay>
      <header class="m-shop-header">
        <div class="m-shop-back">
          <img class="m-shop-back-img" :src="imgBaseUrl + shopDetailData?.image_path" alt="" />
        </div>
        <section>
          <div class="m-head-contain">
            <van-icon
              class="m-go-back"
              size="23"
              color="white"
              name="arrow-left"
              @click="router.back()"
            />
            <van-row class="px-2 py-2">
              <van-col :span="5">
                <van-image
                  :src="imgBaseUrl + shopDetailData.image_path"
                  fit="cover"
                  width="70"
                  height="70"
                  class="m-head-img"
                ></van-image
              ></van-col>
              <van-col :span="19" class="white px-2 pt-1">
                <p class="fs-1 mb-3 strong text-ellipsis">{{ shopDetailData.name }}</p>
                <p class="fs-6 mb-3 text-ellipsis">
                  商家配送&nbsp;/&nbsp;{{
                    shopDetailData.order_lead_time
                  }}&nbsp;分钟送达&nbsp;/&nbsp;配送费￥{{ shopDetailData.float_delivery_fee }}
                </p>
                <p class="fs-6 text-ellipsis">公告:&nbsp;{{ shopDetailData.promotion_info }}</p>
              </van-col>
            </van-row>
            <footer
              class="ml-2 pb-2 m-head-footer"
              v-if="shopDetailData.activities && shopDetailData.activities.length"
            >
              <p class="white">
                <span
                  class="d-inline-block fs-8 m-head-icon"
                  :style="`background-color:#${shopDetailData.activities[0].icon_color}`"
                  >{{ shopDetailData.activities[0].icon_name }}</span
                >
                <span class="d-inline-block fs-7 mx-2">{{
                  shopDetailData.activities[0].description
                }}</span>
                <span class="fs-7">(APP专享)</span>
                <span class="fs-7 m-head-activities">
                  <span>{{ shopDetailData.activities.length + "个活动" }}&nbsp;</span>
                  <van-icon size="12" name="arrow" />
                </span>
              </p>
            </footer>
          </div>
        </section>
      </header>
      <nav>
        <van-tabs color="#3190e8" title-active-color="#3190e8" v-model:active="activeName">
          <van-tab title="商品" name="food"></van-tab>
          <van-tab title="评价" name="comment"></van-tab>
        </van-tabs>
      </nav>
      <section class="m-main" id="main">
        <section v-show="activeName == 'food'" class="m-main-food">
          <div v-if="foodListData.length" class="food-list">
            <ul class="food-left" ref="tagBox">
              <li
                class="food-tag"
                :class="{ 'food-tag-active': selectedTag == index }"
                v-for="(item, index) in foodListData"
                :key="item.id"
                @click="selectFoodTag(index)"
              >
                <span>{{ item.name }}</span>
                <div class="count-tag" v-if="FoodKindCount(item.foods)">
                  <span>{{ FoodKindCount(item.foods) }}</span>
                </div>
              </li>
            </ul>
            <ul class="food-right" ref="foodBox">
              <li v-for="item in foodListData" :key="item.id" class="food-detail-box">
                <header class="detail-box-header">
                  <span class="fs-3 strong text-2 mx-3 d-inline-block">{{ item.name }}</span>
                  <span class="text-3">{{ item.description }}</span>
                </header>
                <section class="detail-box-main">
                  <div
                    class="detail-box-item"
                    v-for="food in item.foods"
                    :key="food._id"
                    @click="gotoFoodDetail(food)"
                  >
                    <van-row class="px-3 py-3">
                      <van-col :span="5">
                        <van-image
                          :src="imgBaseUrl + food.image_path"
                          fit="cover"
                          width="46"
                          height="46"
                          class="m-head-img"
                        ></van-image
                      ></van-col>
                      <van-col :span="16" class="text-1 pt-1">
                        <div class="food-show-box">
                          <p class="fs-2 mb-3 strong text-ellipsis">{{ food.name }}</p>
                          <p v-if="food.description" class="fs-7 mb-3 text-ellipsis text-3">
                            {{ food.description }}
                          </p>
                          <p class="fs-7 text-ellipsis mb-2">
                            <span>月售{{ food.month_sales }}份</span>
                            <span>&nbsp;好评率{{ food.satisfy_rate }}%</span>
                          </p>
                          <p v-if="food?.activity?.image_text" class="mb-2">
                            <span
                              class="fs-8 strong food-activity"
                              :style="`color:#${food.activity?.image_text_color}`"
                              >{{ food.activity.image_text }}</span
                            >
                          </p>
                          <p class="fs-7 text-ellipsis" style="color: #f2690a">
                            <span class="fs-6">￥</span>
                            <span class="fs-3 strong">{{ food.specfoods[0].price }}</span>
                            <span v-if="food.specfoods.length > 1" class="ml-2 fs-7 text-2"
                              >起</span
                            >
                          </p>
                        </div>
                      </van-col>
                    </van-row>
                    <div v-if="attributesXin(food.attributes)" class="fs-8 food-attributes-zhao">
                      <span>招牌</span>
                    </div>
                    <div v-if="attributesXin(food.attributes, '新')" class="food-attributes-xin">
                      <span class="food-attributes-xin-back"> </span>
                      <span class="fs-8 food-attributes-xin-text">新品</span>
                    </div>
                    <BuyIcon
                      class="food-buy-icon"
                      :foods="food"
                      :shopId="id"
                      @mutClick="selectedMutFood"
                      @reduceMut="reduceMut"
                    ></BuyIcon>
                  </div>
                </section>
              </li>
            </ul>
          </div>
          <div v-else><van-empty description="暂无商品"></van-empty></div>
          <div class="shop-footer">
            <van-row>
              <van-col span="17" @click="showShopCart">
                <van-badge :content="ShopSum" :offset="[58, -10]" :show-zero="false">
                  <div class="shop-container" :class="{ 'shop-icon-active': ShopSum }">
                    <svg class="shop-icon">
                      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-icon"></use>
                    </svg>
                  </div>
                </van-badge>

                <div class="shop-all-money">
                  <p class="strong">
                    <span>￥</span>
                    <span>{{ allPrice }}</span>
                  </p>
                  <p class="fs-9 mt-1 ml-1">配送费5元</p>
                </div>
              </van-col>
              <van-col span="7">
                <div class="goto-pay strong" v-if="miniDeliverNum > 0">
                  还差{{ miniDeliverNum }}￥起送
                </div>
                <div
                  class="goto-pay strong goto-pay-active"
                  v-else
                  @click="router.push({ name: 'ConfirmOrder', params: { shopId: id } })"
                >
                  去结算
                </div>
              </van-col>
            </van-row>
          </div>
        </section>
        <section
          v-show="activeName == 'comment'"
          class="m-main-comment"
          v-load-more="getMoreComments"
          type="2"
        >
          <div>
            <section v-if="allRating">
              <div class="all-rating py-3">
                <div class="rating-left">
                  <p class="fs-1 mb-1" style="color: red">
                    {{ String(allRating.overall_score).slice(0, 3) }}
                  </p>
                  <p class="text-2 mb-2 fs-7"><span>综合评价</span></p>
                  <p class="text-3 fs-9">
                    <span
                      >高于周边商家{{ String(allRating.compare_rating * 100).slice(0, 4) }}%</span
                    >
                  </p>
                </div>
                <div class="rating-right">
                  <p class="fs-7 text-2 mb-2">
                    <span class="mr-1">服务态度</span>
                    <van-rate
                      v-model="allRating.service_score"
                      readonly
                      allow-half
                      size="8px"
                      color="#fd9b12"
                      gutter="1px"
                      class="mr-1"
                    />
                    <span style="color: #fd9b12">{{
                      String(allRating.service_score).slice(0, 3)
                    }}</span>
                  </p>
                  <p class="fs-7 text-2 mb-2">
                    <span class="mr-1">菜品评价</span>
                    <van-rate
                      v-model="allRating.food_score"
                      readonly
                      allow-half
                      size="8px"
                      color="#fd9b12"
                      gutter="1px"
                      class="mr-1"
                    />
                    <span style="color: #fd9b12">{{
                      String(allRating.food_score).slice(0, 3)
                    }}</span>
                  </p>
                  <p class="fs-7 text-2 mb-1">
                    <span class="mr-1">送达时间</span>
                    <span>{{ allRating.deliver_time }}分钟</span>
                  </p>
                </div>
              </div>
              <div class="px-2 py-2 back-gray"></div>
              <div class="category-rating px-3 py-2">
                <van-tag
                  class="my-1 mx-1"
                  v-for="item in categoryRating"
                  :key="item._id"
                  size="large"
                  :color="
                    commentId == item.name
                      ? '#3190e8'
                      : item.name == '不满意'
                      ? '#f6f6f6'
                      : '#e9f5fe'
                  "
                  :text-color="
                    commentId == item.name ? 'white' : item.name == '不满意' ? '#ababab' : '#87919a'
                  "
                  type="primary"
                  @click="selectCommentTag(item)"
                >
                  <span>{{ item.name }}</span>
                  <span>({{ item.count }})</span>
                </van-tag>
              </div>
              <ul class="user-rating">
                <li v-for="item in userRatingInfo" :key="item._id">
                  <van-divider :hairline="false"></van-divider>
                  <van-row>
                    <van-col :span="3" offset="1">
                      <van-image
                        radius="50%"
                        class="d-inline-block"
                        width="1rem"
                        height="1rem"
                        fit="cover"
                        :src="getImgPath(item.avatar)"
                      />
                    </van-col>
                    <van-col :span="15">
                      <p class="text-2 fs-7 mb-1">{{ item.username }}</p>
                      <p>
                        <van-rate
                          v-model="item.rating_star"
                          readonly
                          allow-half
                          size="8px"
                          color="#fd9b12"
                          gutter="1px"
                          class="mr-1"
                        />
                      </p>
                      <p>
                        <van-image
                          v-for="pic in item.item_ratings"
                          :key="pic._id"
                          class="d-inline-block mr-1 mb-1"
                          width="1.8rem"
                          height="1.8rem"
                          fit="cover"
                          :src="getImgPath(pic.image_hash)"
                        />
                      </p>
                      <p>
                        <van-tag
                          v-for="food in item.item_ratings"
                          :key="food._id"
                          type="warning"
                          class="mr-1"
                          ><span style="width: 1rem" class="d-block text-ellipsis fs-7">{{
                            food.food_name
                          }}</span></van-tag
                        >
                      </p>
                    </van-col>
                    <van-col :span="5"
                      ><span class="text-2">{{ item.rated_at }}</span></van-col
                    >
                  </van-row>
                </li>
                <div v-if="isNoComment" class="my-2 text-center fs-6 text-2">暂时没有了</div>
              </ul>
            </section>
          </div>
        </section>
      </section>
      <transition name="mask">
        <div class="cover" v-show="popupShow && ShopList.length" @click="popupShow = false"></div>
      </transition>
      <transition name="pop">
        <section class="popup" v-show="popupShow && ShopList.length">
          <header class="pt-1 pop-header">
            <van-row>
              <van-col :span="20"><span class="text-1 ml-2">购物车</span></van-col>
              <van-col :span="4" @click="clearShopCart">
                <span class="fs-7 mr-1 text-3">清空</span>
                <van-icon name="delete" color="gray" size="15"></van-icon>
              </van-col>
            </van-row>
          </header>
          <ul>
            <li v-for="item in ShopList" class="my-3 d-flex" :key="item.id">
              <div class="d-inline-block fs-5 text-2 food-name">{{ item.name }}</div>
              <div class="fs-5 text-2 pop-mon">
                <span class="fs-7">￥</span><span class="fs-5">{{ item.price }}</span>
              </div>
              <div class="add-reduce">
                <section class="cart_button">
                  <svg @click="reduceShopFood(item)">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
                  </svg>

                  <span class="cart_num down-fixed">{{ item.num }}</span>
                  <svg class="add_icon" @click="addShopFood(item)">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
                  </svg>
                </section>
              </div>
            </li>
          </ul>
        </section>
      </transition>
      <Transition name="detail-show">
        <FoodDetail
          v-if="foodDetailShow"
          :food="foodDetail"
          :shop-id="id"
          @close="closeFoodDetail"
          @selectedMutFood="selectedMutFood"
          @reduce-mut="reduceMut"
        ></FoodDetail>
      </Transition>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, toRefs, computed, watch, nextTick } from "vue";
import {
  getShopDetail as shopDetail,
  getFoodList,
  getComments,
  getCommentsKinds,
  getCommentsScore,
} from "@/api";
import {
  ShopDetail_format,
  Attribute,
  Food,
  Food_id,
  Specfood,
  ShopCartItem_format,
  restaurantRating_format,
  userRating_format,
  restaurantRatingCategory_format,
} from "@/type/index";
import { imgBaseUrl } from "dir/env.config";
import { useRouter } from "vue-router";
import { shop } from "@/store/index";
import { storeToRefs } from "pinia";
import { Dialog } from "vant";
import FoodDetail from "./child/foodDetail/index.vue";
import { getImgPath } from "@/uitls/path";
const VanDialog = Dialog.Component;
const props = defineProps({
  id: {
    type: String,
  },
});
const router = useRouter();
const { id } = toRefs(props);
const store = shop();
//购物车
const { cartList } = storeToRefs(store);
//获取右边栏每个种类的header对应的offset高度
const offsetTopList = computed(() => {
  const list: number[] = [];
  const headerList = foodBox.value.getElementsByClassName("food-detail-box");
  for (let item of headerList) {
    list.push(item.offsetTop);
  }
  return list;
});
//选中左边种类栏,并滚动右边栏到指定位置
const selectedTag = ref<number>(0);
const foodBox = ref<HTMLElement>(null);
const selectFoodTag = (index: number) => {
  selectedTag.value = index;
  foodBox.value.scrollTo({
    top: foodBox.value.children[index].offsetTop,
    left: 0,
    behavior: "smooth",
  });
};
//获取商品栏右边滚动位置对应的index(二分查找:因为数组是升序)
const getScrollIndex = (arr: number[], scrollTop: number): number => {
  let right = arr.length - 1,
    left = 0,
    middle,
    index = -1;
  while (right >= left) {
    middle = Math.floor((right + left) / 2);
    if (arr[middle] > scrollTop) {
      right = middle;
    } else if (arr[middle] < scrollTop) {
      left = middle;
    } else {
      index = middle;
      break;
    }
    if (Math.abs(right - left) <= 1) {
      index = left;
      break;
    }
  }
  return index;
};
//商品栏左边实现滚动实现函数
const timer = ref<number>(null);
const frameId = ref<number>(null);
const tagBox = ref<HTMLElement>(null);
const handle = () => {
  if (!timer.value) {
    const target = foodBox.value;
    const index = getScrollIndex(offsetTopList.value, target.scrollTop);
    const distance = tagBox.value.children[index].offsetTop - tagBox.value.offsetHeight / 2;
    tagBox.value.scrollTo({
      top: distance,
      behavior: "smooth",
    });
    selectedTag.value = index;

    timer.value = window.setTimeout(() => {
      clearTimeout(timer.value);
      timer.value = null;
    }, 100);
  }
};
//监听商品栏右边页面滚动实现左边跟随滚动
const scrolling = () => {
  let oldScrollTop = foodBox.value.scrollTop;
  foodBox.value.addEventListener("touchmove", () => {
    handle();
  });
  foodBox.value.addEventListener("touchend", () => {
    moveEnd();
  });
  const moveEnd = () => {
    frameId.value = requestAnimationFrame(() => {
      if (foodBox.value.scrollTop != oldScrollTop) {
        oldScrollTop = foodBox.value.scrollTop;
        moveEnd();
      } else {
        handle();
        cancelAnimationFrame(frameId.value);
      }
    });
  };
};
//商店的一些信息
const shopDetailData = ref<ShopDetail_format>();
const getShopDetail = async () => {
  const res = await shopDetail<ShopDetail_format>(id.value);
  shopDetailData.value = res;
  console.log(shopDetailData.value);
};

//评价分类标签
const commentId = ref<string>("全部");

const selectCommentTag = item => {
  commentId.value = item.name;
};
//获取用户评价的偏移数
let offset = 0;
//每次获取的评论数
let limit = 10;
//获取的评论列表
const userRatingInfo = ref<userRating_format[]>([]);
//记录上一次请求是否结束
let isRequestEnd = true;
//是否已无评论
const isNoComment = ref<boolean>(false);
//监听标签是否发生变化
watch(commentId, () => {
  offset = 0;
  userRatingInfo.value = [];
  getUserComments();
});
//获取评论
const getUserComments = async () => {
  if (!isRequestEnd || isNoComment.value) return;
  isRequestEnd = false;
  const res = await getComments<userRating_format[]>({
    restaurant_id: parseInt(id.value),
    limit,
    offset,
    tag_name: commentId.value,
  });
  if (res.length == 10) {
    userRatingInfo.value.push(...res);
    offset += 10;
    isRequestEnd = true;
  } else {
    userRatingInfo.value.push(...res);
    isNoComment.value = true;
    isRequestEnd = true;
  }
};
//获取更多评论
const getMoreComments = () => {
  getUserComments();
};
//获取商店的评价信息
const allRating = ref<restaurantRating_format>();
const categoryRating = ref<restaurantRatingCategory_format[]>();
const getRatingInfo = async () => {
  const res1 = await getCommentsScore<restaurantRating_format>(parseInt(id.value));
  const res2 = await getCommentsKinds<restaurantRatingCategory_format[]>(parseInt(id.value));
  getUserComments();
  allRating.value = res1;
  categoryRating.value = res2;
};

//获取物品列表
const foodListData = ref<ShopDetail_format[]>([]);
const getFoodListData = async () => {
  const res = await getFoodList<ShopDetail_format[]>(parseInt(id.value));
  foodListData.value = res;
  console.log(res);
  if (foodListData.value.length) {
    nextTick(scrolling);
  }
};

//是否展示招牌标签
const activeName = ref<string>();

const attributesXin = (list: Attribute[], tag: string = "招牌") => {
  return list.some(item => {
    return item?.icon_name == tag;
  });
};
//物品左边导航栏是否展示右上角的小圆点
const FoodKindCount = computed(() => {
  return function (list: Food[]) {
    return list.reduce((pre, cur) => {
      let category_id = cur.category_id;
      let item_id = cur.item_id;
      const shopCart = cartList.value[id.value];
      if (shopCart && shopCart[category_id] && shopCart[category_id][item_id]) {
        Object.values(shopCart[category_id][item_id]).forEach((item: Food_id) => {
          if (item) {
            pre = pre + item.num;
          }
        });
      }
      return pre;
    }, 0);
  };
});
//此商店购物车列表(将pinia存储的对象转化为数组,如果数组为空,将购物车展示设置为false)
const ShopList = computed(() => {
  const list = [];
  let shop = cartList.value[id.value];
  if (shop) {
    Object.keys(shop).forEach(key1 => {
      let category = shop[key1];
      Object.keys(category).forEach(key2 => {
        let itemId = category[key2];
        Object.keys(itemId).forEach(key3 => {
          let food = itemId[key3];
          list.push({
            ...food,
            category_id: key1,
            item_id: key2,
          });
        });
      });
    });
    return list as ShopCartItem_format[];
  } else {
    popupShow.value = false;
    return [];
  }
});

//商品预览详情
const foodDetailShow = ref<boolean>(false);
const foodDetail = ref<Food>();
const gotoFoodDetail = food => {
  foodDetail.value = food;
  foodDetailShow.value = true;
};
const closeFoodDetail = () => {
  foodDetailShow.value = false;
};

//购物车商品总数量
const ShopSum = ref<number>(0);

//购物车中所有商品总价
const allPrice = computed(() => {
  ShopSum.value = 0;
  let sum: number = 0;
  ShopSum.value = 0;
  if (cartList.value[id.value]) {
    sum = ShopList.value.reduce((pre, cur) => {
      ShopSum.value += cur.num;
      return pre + cur.num * cur.price;
    }, 0);
  }
  return Number(sum).toFixed(2);
});
//差多少钱起送
const miniDeliverNum = computed(() => {
  return shopDetailData.value.float_minimum_order_amount - parseInt(allPrice.value);
});

//弹窗展示的内容
const showData = ref<Food>(null);
const mutIsShow = ref<boolean>(false);
//多规格选中标签
const selectedCart = ref<Specfood>();
//多规格弹窗
const selectedMutFood = (food: Food) => {
  showData.value = food;
  console.log(123);
  mutIsShow.value = true;
  selectedCart.value = showData.value.specfoods[0];
};
//关闭弹窗
const turnBack = () => {
  mutIsShow.value = false;
};
//多规格已选择标签
const addMutCart = (item: Specfood) => {
  selectedCart.value = item;
};
//多规格商品加入购物车
const addFood = () => {
  store.addCart(
    id.value,
    showData.value.category_id,
    showData.value.item_id,
    selectedCart.value.food_id,
    selectedCart.value.specs_name,
    selectedCart.value.price,
    "",
    selectedCart.value.packing_fee,
    selectedCart.value.sku_id,
    selectedCart.value.stock
  );
  mutIsShow.value = false;
};
//删除多规格商品,购物车列表展示
const reduceMut = () => {
  popupShow.value = true;
};
//购物车列表是否展示
const popupShow = ref<boolean>(false);
//展示购物车
const showShopCart = () => {
  if (ShopList.value.length) {
    popupShow.value = true;
  }
};
//购物车商品添加
const addShopFood = (item: ShopCartItem_format) => {
  store.addCart(
    id.value,
    item.category_id,
    item.item_id,
    item.id,
    item.name,
    item.price,
    item.specs,
    item.packing_fee,
    item.sku_id,
    item.stock
  );
};
//购物车商品去除
const reduceShopFood = (item: ShopCartItem_format) => {
  store.reduceCart(id.value, item.category_id, item.item_id, item.id);
};
const clearShopCart = () => {
  store.removeCart(id.value);
};
//初始化数据
const initData = () => {
  getShopDetail();
  getFoodListData();
  getRatingInfo();
};
//调用初始化函数
initData();
</script>

<style lang="scss" scoped>
@import "@/assets/scss/mixin.scss";
.m-shop {
  @include wh(100%, 100%);
  left: 0;
  top: 0;
  position: absolute;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.m-shop-header {
  position: relative;
  .m-shop-back {
    position: absolute;
    z-index: 9;
    @include wh(100%, 100%);
    overflow: hidden;
    .m-shop-back-img {
      position: absolute;
      width: 100%;
      filter: blur(10px);
    }
  }
  .m-head-contain {
    position: relative;
    @include wh(100%, 100%);
    z-index: 10;
    background-color: rgba(119, 103, 137, 0.43);
    .m-go-back {
      position: absolute;
      top: 0.05rem;
      z-index: 12;
    }
    .m-head-img {
      ::v-deep img {
        border-radius: 0.2rem;
      }
    }
  }
  .m-head-icon {
    padding: 0.05rem;
    border-radius: 0.05rem;
  }
  .m-head-footer {
    position: relative;
    .m-head-activities {
      position: absolute;
      right: 0.2rem;
    }
  }
}
.m-main {
  flex: 1;
  height: 0;
  border-top: 0.03rem solid $Base;
  position: relative;
  box-sizing: border-box;

  .m-main-food {
    @include wh(100%, 100%);
    .food-list {
      @include wh(100%, 100%);
      display: flex;
      padding-bottom: 1.25rem;
      .food-left {
        flex: 2;
        height: 100%;
        background-color: $tc;
        overflow-y: auto;
        .food-tag {
          position: relative;

          padding: 0.37rem 0.3rem;
          border-bottom: 0.01rem solid $Lighter;
          color: $text-2;
          line-height: 0.5rem;
          display: block;
          font-size: 0.38rem;
          letter-spacing: 0.03rem;
          .count-tag {
            background-color: #ee0a24;
            @include sc(0.30rem, white);
            font-weight: 800;
            position: absolute;
            right: 0;
            top: 0;
            border-radius: 0.5rem;
            padding: 0 0.14rem 0 0.15rem;
            transform: scale(0.8);
            border: 0.03rem solid  white inset;
          }
        }
        .food-tag-active {
          border-left: 0.12rem solid $blue;
          background-color: white;
          color: $text-1;
          font-weight: 600;
        }
      }
      .food-right {
        flex: 6;
        background: white;
        height: 100%;
        overflow-y: auto;
        .food-detail-box {
          .detail-box-header {
            background-color: $tc;
            padding: 0.37rem 0;
          }
          .detail-box-main {
            .detail-box-item {
              position: relative;
              border-bottom: 0.015rem solid whitesmoke;
              .food-attributes-zhao {
                position: absolute;
                top: 0.3rem;
                right: 0.4rem;
                border: 0.02rem solid #f07373;
                border-radius: 0.15rem;
                padding: 0.04rem 0.03rem 0.01rem 0.03rem;
                transform: scale(0.7);
                color: #f07373;
              }
              .food-attributes-xin {
                position: absolute;
                top: 0;
                left: 0;

                .food-attributes-xin-back {
                  height: 0;
                  width: 0;
                  display: block;
                  color: white;
                  border-left: 0.4rem solid #5ec452;
                  border-top: 0.4rem solid #5ec452;
                  border-bottom: 0.4rem solid transparent;
                  border-right: 0.4rem solid transparent;
                }
                .food-attributes-xin-text {
                  position: absolute;
                  color: white;
                  left: 0.05rem;
                  top: 0.15rem;
                  transform: rotateZ(-45deg);
                  font-size: 0.2rem;
                }
              }
              .food-buy-icon {
                position: absolute;
                right: 0.4rem;
                bottom: 0.19rem;
              }
              .food-show-box {
                position: relative;

                .food-activity {
                  border: 0.02rem solid;
                  border-radius: 0.15rem;
                  padding: 0.04rem 0.03rem 0.01rem 0.03rem;
                  transform: scale(0.7);
                  display: inline-block;
                }
              }
            }
          }
        }
      }
    }
    .shop-footer {
      @include wh(100%, 1.25rem);
      position: absolute;
      left: 0;
      background-color: #3d3d3f;
      bottom: 0;
      z-index: 14;
      .shop-container {
        display: flex;
        background-color: #3d3d3f;
        border: 0.12rem solid #444;
        padding: 0.25rem;
        border-radius: 50%;
        position: absolute;
        top: -0.4rem;
        left: 0.3rem;
        .shop-icon {
          @include wh(0.7rem, 0.7rem);
        }
      }
      .shop-icon-active {
        background-color: $blue;
      }
      .shop-all-money {
        position: absolute;
        top: 0.2rem;
        left: 2rem;
        @include sc(0.46rem, $fc);
        font-family: Helvetica Neue, Tahoma, Arial;
      }
      .goto-pay {
        background-color: rgb(108, 108, 108);
        height: 1.25rem;
        width: 100%;
        line-height: 1.25rem;
        text-align: center;
        @include sc(0.4rem, $fc);
      }
      .goto-pay-active {
        background-color: #5ec452;
      }
    }
  }
  .m-main-comment {
    height: 100%;
    overflow-y: auto;
    .all-rating {
      display: flex;
      .rating-left {
        flex: 12;
        p {
          width: 100%;
          text-align: center;
        }
      }
      .rating-right {
        flex: 12;
      }
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 70%;
  min-height: 150px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  .x-icon {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
  }
  .f-price {
    height: 100%;
    color: #f07373;
    flex: 12;
  }
  .dialog-footer {
    flex: 1;
    height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 1.1rem;
  }
  .add-btn {
    flex: 6;
  }
}
.popup {
  position: absolute;
  @include wh(100%, auto);
  background-color: white;
  bottom: 1.2rem;
  left: 0;
  z-index: 12;
  .pop-header {
    border-bottom: 0.01px solid $Dark;
    height: 0.6rem;
  }
  .food-name {
    flex: 1;
    transform: translateY(0.08rem);
    padding-left: 0.3rem;
  }
  .pop-mon {
    color: #f07373;
    transform: translateY(0.08rem);
  }
  .add-reduce {
    margin-left: 1rem;
    margin-right: 0.4rem;
    .add_icon {
      position: relative;
      z-index: 6;
    }
    .cart_button {
      display: flex;
      align-items: center;
      svg {
        @include wh(0.6rem, 0.6rem);
        fill: #3190e8;
      }
    }

    .specs_reduce_icon {
      fill: #999;
      @include wh(0.6rem, 0.6rem);
    }
    .cart_num {
      @include sc(0.4rem, #666);
      min-width: 0.7rem;
      text-align: center;
      font-family: Helvetica Neue, Tahoma;
      display: inline-block;
    }
  }
}
.pop-enter-active,
.pop-leave-active {
  transition: all 0.3s;
}
.pop-enter-from,
.pop-leave-to {
  transform: translateY(100%);
}
.cover {
  position: fixed;
  z-index: 12;
  left: 0;
  right: 0;
  @include wh(100%, 100%);
  background: rgba(0, 0, 0, 0.4);
  opacity: 0.6;
}
</style>
